<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view v-if="orderData.length > 0" class="lists">
				<view class="items" v-for="(item, index) in orderData" :key="index">
					<view class="item-title">
						<view class="item-title-left">
							<view class="product_name">
								<u--text prefixIcon="bag" iconStyle="font-size: 19px" :text="item.product_name"></u--text>
							</view>
							<text style="color: #2979ff; font-weight: bold;">【{{item.type==1?'到店':'邮寄'}}】</text>
						</view>
						<text v-if="item.status == 1" class="pay_state red">待发货</text>
						<text v-else-if="item.status == 2" class="pay_state green">已发货</text>
					</view>
					<u-line></u-line>
					<view class="pro-con">
						<view class="right">
							<view class="pro_titles">
								<text>{{item.name}}</text>
								<view class="icons" @click="editAddress(item)">
									<u-icon name="edit-pen"></u-icon>
								</view>
							</view>
							<view class="pro_info">
								{{item.mobile}}
							</view>
							<view class="pro_total">
								<text>{{item.address}}</text>
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="item-time">
						<view class="item-time-list">
							<view class="">
								申领时间
							</view>
							<view class="">
								{{item.create_time}}
							</view>
						</view>
						<u-line v-if="item.status == 2" dashed></u-line>
						<view v-if="item.status == 2" class="item-time-list">
							<view class="">
								发货时间
							</view>
							<view class="">
								{{item.deliver_time}}
							</view>
						</view>
					</view>
					<u-line v-if="item.status==1"></u-line>
					<view v-if="item.status==1" class="pro_info">
						<view class="pro_price"></view>
						<view class="pro_price">
							<!-- #ifdef APP -->
							<view v-if="item.sn == '' || item.sn == null || item.sn == undefined" class="cenBtn blues" @click="bindsApp(item)">
								绑定终端
							</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view v-if="item.sn == '' || item.sn == null || item.sn == undefined" class="cenBtn blues" @click="binds(item)">
								绑定终端
							</view>
							<!-- #endif -->
							<view v-if="item.confirm_time <= 0" class="cenBtn reds" @click="cancelOrder(item)">
								取消申领
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="order" text="暂无记录" icon="../../../../static/Empty/order_null.png"></u-empty>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				userinfo: {},
				loadding: false,
				orderState: [{
					name: '待发货'
				}, {
					name: '已发货'
				}],
				value2: 2,
				orderData: [],
				pay_state: 1,
				page: 1,
				page_size: 6,
				bottom: true,
				total: 0,
				type: 1,
				sn: '',
				is_true: true
			}
		},
		onLoad(e) {
			this.type = e.type
			this.userinfo = uni.getStorageSync('userinfo');
			this.loadData()
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
		},
		onShow() {
			this.page = 1
			this.bottom = true
			this.loadData()
		},
		// //下拉刷新
		// onReachBottom() {
		// 	if (this.bottom == true) {
		// 		this.page++
		// 		this.loadData()
		// 	}
		// },
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/index/index'
			})
			return true
		},
		methods: {
			// 获取订单数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getApplyList',
					data: {
						type: this.type,
						pay_state: this.pay_state,
						page: this.page,
						page_size: this.page_size
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				if (res.code == 1) {
					this.orderData = res.data
				}
			},
			// 微信公众号配置
			injectConfig() {
				let url = ''
				url = location.href.split('#')[0]
				uni.request({
					url: util.API_URL + '/api/v1/test',
					data: {
						url: url
					},
					success: (res) => {
						const data = res.data
						if (data.code == 1) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {});
						}
					},
					fail(err) {}
				});
			},
			// 取消申领
			cancelOrder(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消申领吗？',
					success: function(res) {
						if (res.confirm) {
							that.cancelOrderFun(item)
						}
					}
				});
			},
			// 取消申领 - 提交
			async cancelOrderFun(item) {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/cancelApply',
					data: {
						id: item.id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				if (res.code == 1) {
					setTimeout(function() {
						that.loadData()
					}, 1500)
				}
			},
			// 修改地址
			editAddress(item) {
				uni.navigateTo({
					url: '/pages/version5/index/shop/address/index?tp=2&order_id=' + item.id + '&id=' + item.id
				})
			},
			// APP扫码
			bindsApp(item) {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
						_this.bindTerminal(item)
					}
				});
			},
			// 调用微信扫码
			binds(item) {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.sn = resultrow[1]
							_this.bindTerminal(item)
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 绑定终端 - 方法
			async bindTerminal(item) {
				if (this.sn == '' || this.sn == undefined) {
					uni.showToast({
						title: '操作失败，未检测到终端',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/bindTerminal',
					data: {
						apply_id: item.id,
						sn: this.sn
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: '绑定成功',
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 1) {
					this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		.main {
			padding: 0 20rpx;

			.lists {
				margin: 20rpx 0;
				padding-bottom: 100rpx;

				.items {
					padding: 0 30rpx;
					padding-bottom: 20rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.item-title {
						width: 100%;
						display: block;
						font-size: 26rpx;
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						
						.item-title-left {
							.product_name {
								float: left;
							}
							text {
								margin-left: 10rpx;
								margin-top: 2rpx;
								float: left;
							}
						}

						.pay_state {
							font-size: 24rpx;
							padding-top: 6rpx;
							font-weight: bold;
						}

						.gray {
							color: #c8c9cc;
						}

						.red {
							color: #fa3534;
						}

						.green {
							color: #19be6b;
						}
					}

					.pro-con {
						padding: 20rpx 0;

						.right {

							.pro_titles {
								font-size: 28rpx;
								font-weight: bold;
								display: flex;
								justify-content: space-between;
							}

							.pro_info {
								font-size: 24rpx;
								padding-top: 20rpx;
								display: flex;
								justify-content: space-between;
							}

							.pro_total {
								font-size: 24rpx;
								text-align: right;
								padding-top: 20rpx;
								display: flex;
								justify-content: space-between;
							}
						}
					}

					.item-time {
						
						.item-time-list {
							font-size: 26rpx;
							padding: 20rpx 0;
							display: flex;
							justify-content: space-between;
						}
					}
					
					.pro_info {
						padding-top: 20rpx;
						display: flex;
						justify-content: space-between;
						
						.pro_price {
							display: flex;
							justify-content: flex-end;
							.cenBtn {
								margin-left: 16rpx;
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
								color: #ffffff;
								font-size: 24rpx;
							}
							
							.reds {
								background-color: #fa3534;
							}
							
							.blues {
								background-color: #2979ff;
							}
						}
					}
					
					.operate {
						padding: 0 0rpx 20rpx 20rpx;
						height: 60rpx;

						.buyBtn {
							float: right;
							margin-left: 30rpx;
							padding: 10rpx 20rpx;
							border-radius: 20rpx;
							background-color: #fa3534;
							color: #ffffff;
							font-size: 28rpx;
						}

						.cancel {
							float: right;
							padding: 10rpx 20rpx;
							border-radius: 20rpx;
							background-color: #c8c9cc;
							color: #ffffff;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>